import React, { useState,useEffect } from "react";
import instance from "../../apis/request";
import { useSelector, useDispatch } from 'react-redux'
import { getArticleList } from "../../store/counterSlice";

import { Space, Table, Tag } from 'antd';
function Login() {
    const {articleData,count} = useSelector(state => state.counter)
  const dispatch = useDispatch()
  const [data, setData] = useState({
    page: 1, //页码  必传
    pageSize: 6, //每页显示条数 必传
    keyword: null, //搜索标题
    tag: null, //搜索标签
  });
  const [fy,setFy]=useState({
    current:1,
    pageSize:6,
    total:0
  })
  const aa=async()=>{
    await instance.get('/article/list',{
        params:data
    }).then(res=>{
        dispatch(getArticleList(res.data.rows))
        setFy({
            ...fy,
            total:res.count
        })
    })
  }
  
  useEffect(()=>{
    aa()
  },[data,dispatch])
  const ad=(diss)=>{
    setData({
        ...data,
        page:diss.page,
        pageSize:diss.pageSize
    })
    setFy({
        ...fy,
        current:diss.page,
        pageSize:diss.pageSize,
        total:res.total

    })
  }

  const columns = [
  {
    title: '姓名',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '年龄',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <button>删除</button>
        <button>编辑</button>
      </Space>
    ),
  },
];

  return <div>
    <Table dataSource={articleData} columns={columns} pagination={fy} onChange={ad} />
  </div>;
}


export default Login;
